<template>
	<el-cascader :options="cityLists" v-model="citys" :props="cityProps" clearable @change="switchCitys" :lazy="true" :disabled="disabled"></el-cascader>
</template>

<script>
import cityData from "@/assets/citys.json";
export default {
	props:{
		val: {
			type: Array,
			default: []
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			citys: [],
			cityLists: [],
			cityProps: {
				value: "name",
				label: "name",
				children: "subLevelModelList",
			},
		}
	},
	created() {
		this.cityLists = cityData.city;
		this.citys = this.val;
	},
	methods:{
		//清除数据
		clearData(){
			this.$emit('update:val',[]);
			this.citys = [];
		},
		// 选择城市
		switchCitys(){
			this.$emit('handleChange', this.citys);
			this.$emit('update:val',this.citys);
		}
	},
	watch:{
		'val'(){
			this.citys = this.val;
		}
	}
}	
</script>

<style>
</style>
